(function (joint, util) {
  'use strict';

  const legsY = 0.7;
  const bodyY = 0.3;
  const headY = 0.15;

  // 用例图 - actor
  joint.dia.Element.define('standard.Actor', {
    attrs: {
      background: {
        width: 'calc(w)',
        height: 'calc(h)',
        fill: 'transparent'
      },
      header: {
        cx: 'calc(0.5 * w)',
        cy: `calc(${headY} * h)`,
        r: `calc(${headY} * h)`,
        stroke: '#333333',
        strokeWidth: 1,
        fill: '#ffffff'
      },
      body: {
        d: `M 0 calc(0.4 * h) h calc(w) M 0 calc(h) calc(0.5 * w) calc(${legsY} * h) calc(w) calc(h) M calc(0.5 * w) calc(${legsY} * h) V calc(${bodyY} * h)`,
        fill: 'none',
        stroke: '#333333',
        strokeWidth: 1
      },
      label: {
        y: 'calc(h + 10)',
        x: 'calc(0.5 * w)',
        textAnchor: 'middle',
        textVerticalAnchor: 'top',
        fontSize: 14,
        fontFamily: 'sans-serif',
        fill: '#333333',
        textWrap: {
          width: 'calc(3 * w)',
          height: null
        }
      }
    }
  }, {
    markup: [{
      tagName: 'rect',
      selector: 'background'
    }, {
      tagName: 'circle',
      selector: 'header'
    }, {
      tagName: 'path',
      selector: 'body'
    }, {
      tagName: 'text',
      selector: 'label'
    }]
  });

  // 需求图
  joint.shapes.standard.Requirement = joint.dia.Element.extend({
    defaults: {
      type: 'standard.Requirement',
      attrs: {
        header: {
          width: 'calc(w)',
          height: 30,
          stroke: '#947a60',
          strokeWidth: 1,
          fill: {
            type: 'linearGradient',
            stops: [
              { offset: '0%', color: '#fbece9' },
              { offset: '100%', color: '#fdfbfb' }
            ]
          }
        },
        body: {
          width: 'calc(w)',
          height: 'calc(h)',
          stroke: '#947a60',
          strokeWidth: 1,
          fill: {
            type: 'linearGradient',
            stops: [
              { offset: '0%', color: '#fbece9' },
              { offset: '100%', color: '#fdfbfb' }
            ]
          }
        },
        headerLabel: {
          text: '<<requirement>>',
          textVerticalAnchor: 'middle',
          textAnchor: 'middle',
          x: 'calc(0.5*w)',
          y: 8,
          fontSize: 12,
          fontFamily: 'sans-serif',
          fill: '#353535',
          textWrap: {
            width: 'calc(w - 10)',
            height: 'calc(h - 10)',
            ellipsis: true
          }
        },
        headerText: {
          textVerticalAnchor: 'middle',
          textAnchor: 'middle',
          x: 'calc(0.5*w)',
          y: 21,
          fontSize: 12,
          fontFamily: 'sans-serif',
          fill: '#353535',
          textWrap: {
            width: 'calc(w - 10)',
            height: 'calc(h - 10)',
            ellipsis: true
          }
        },
        bodyText: {
          textVerticalAnchor: 'top',
          textAnchor: 'left',
          x: 4,
          y: 34,
          fontSize: 12,
          fontFamily: 'sans-serif',
          fill: '#353535',
          textWrap: {
            width: 'calc(w - 20)',
            height: 'calc(h - 40)',
            ellipsis: true
          }
        }
      }
    },
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'rect',
        selector: 'header'
      },
      {
        tagName: 'text',
        selector: 'headerLabel'
      },
      {
        tagName: 'text',
        selector: 'headerText'
      },
      {
        tagName: 'text',
        selector: 'bodyText'
      }
    ]
  });

  // 系统组件图
  joint.shapes.standard.Block = joint.dia.Element.extend({
    defaults: {
      type: 'standard.Block',
      attrs: {
        body: {
          width: 'calc(w)',
          height: 'calc(h)',
          stroke: '#353535',
          strokeWidth: 1,
          fill: '#ffffff'
        },
        title: {
          textAnchor: 'middle',
          x: 'calc(0.5*w)',
          fontSize: 12,
          fontFamily: 'sans-serif',
          fill: '#353535',
        }
      }
    },
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'text',
        selector: 'title'
      }
    ]
  });

})(joint, joint.util);